<template>
  <div class="list-tabs__item">
    <el-tabs>
      <el-scrollbar max-height="300px">
        <el-tab-pane
          v-for="(item, index) in list"
          :key="index"
          :label="item.title"
        >
          <div
            class="container"
            v-for="(item1, index1) in item.content"
            @click="clickItem(item1, index1)"
            :key="index1"
          >
            <div class="avatar" v-if="item1.avatar">
              <el-avatar :size="40" :src="item1.avatar" />
            </div>
            <div class="content">
              <div class="title">
                <div>{{ item1.title }}</div>
                <el-tag :type="item1.tagType" v-if="item1.tagType">{{
                  item1.tag
                }}</el-tag>
              </div>
              <div class="desc">{{ item1.desc }}</div>
              <div class="time">{{ item1.time }}</div>
            </div>
          </div>
          <div class="actions">
            <div
              v-for="(action, i) in actions"
              class="a-item"
              :class="{ 'boder': i !== actions.length-1 }"
              :key="i"
              @click="clickAction(action,i)"
            >
              <div class="a-icon" v-if="action.icon">
                <component :is="`el-icon-${toLine(action.icon)}`"></component>
              </div>
              <div class="a-text">{{ action.text }}</div>
            </div>
          </div>
        </el-tab-pane>
      </el-scrollbar>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import type {
  ActionOptions,
  listOptions,
} from "@/components/notification/src/types";
import { toLine } from "@/utils";
import type { PropType } from "vue";
let props = defineProps({
  // 列表的选项
  list: {
    type: Array as PropType<listOptions[]>,
    required: true,
  },
  // 列表的操作选项
  actions: {
    type: Array as PropType<ActionOptions[]>,
    default: () => [],
  },
});
const emit = defineEmits(["clickItem", "clickAction"]);
const clickItem = (item: any, index: number) => {
  emit("clickItem", {item,index});
};
const clickAction = (action: ActionOptions, index: number) => {
  emit("clickAction", {action, index});
};
</script>

<style scoped lang="scss">
.container {
  display: flex;
  align-items: center;
  padding: 10px;
  &:hover{
    background-color: #e6f6ff;
    cursor: pointer;
  }
  .avatar {
    width: 40px;
    height: 40px;
    margin: 10px 0;
    border-radius: 50%;
    background-color: #f5f5f5;
  }
  .content {
    flex: 1;
    margin-left: 10px;
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}
.actions {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .a-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    .a-icon {
      margin-right: 5px;
      font-size: 14px;
      margin-top: 3px;
    }
    .a-text {
      font-size: 14px;
    }
  }
}
.boder {
  border-right: 1px solid #eeeeee;
}
</style>
